<template>
    <div>
       <detail-banner 
            :sightName="sightName"
            :bannerImg="bannerImg"
            :bannerImgs="gallaryImgs"
       ></detail-banner>
       <detail-header></detail-header>
       <detail-list :list="list"></detail-list>
       <div class="one"></div>
    </div>
</template>
<script>
import DetailBanner from './components/Banner';
import DetailHeader from './components/Header';
import  DetailList from  './components/List';
import axios from 'axios';
export default {
    name: 'Detail',
    components: {
        DetailBanner,
        DetailHeader,
        DetailList
    },
    data () {
        return {
            sightName: '',
            bannerImg: '',
            gallaryImgs: [],
            list: []
        }
    },
    methods: {
        getDetaiInfo () {
            // ajax.get('/api/detail.json?id=' + this.$route.params.id)
            //两种写法对应id值
             axios.get('/api/detail.json', {
                 params: {
                     id:  this.$route.params.id
                 }
             }).then((res) => {
                 res = res.data
                 if (res.ret && res.data) {
                     const data = res.data
                     this.sightName = data.sightName
                     this.bannerImg = data.bannerImg
                     this.gallaryImgs = data.gallaryImgs
                     this.list = data.categoryList
                 }
             })
        }
    },
    mounted () {
        this.getDetaiInfo()
    }
    //想要每次重新获取数据 activated或者在前面写
}
</script>
<style lang="stylus" scoped>
.one
    height 80rem
</style>